<template>
  <div>
    <el-alert
    type="info"
    show-icon
    :closable="false">
    <div slot="title">数据一共{{counts}}条</div>
  </el-alert>
  <!-- 表格 -->
  <el-table
      :data="Tablelist"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120">
        <template slot-scope="scope">
          {{ti[scope.row.questionType]}}
        </template>
      </el-table-column>
      <el-table-column
        label="题干"
        width="280">
        <template slot-scope="scope">
          <span v-html="scope.row.question"></span>
        </template>
      </el-table-column>
      <el-table-column
        label="录入时间"
        width="180">
        <template slot-scope="scope">
          {{Time(scope.row.addDate)}}
        </template>
      </el-table-column>
      <el-table-column
        label="难度"
        width="80">
        <template slot-scope="scope">
          {{nan[scope.row.difficulty]}}
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120">
        <template slot-scope="scope">
          {{shen[scope.row.chkState]}}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="150">
      </el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120">
      </el-table-column>
      <el-table-column
        label="发布状态"
        width="150">
        <template slot-scope="scope">
          {{scope.row.publishState === 0? '上架': '下架'}}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
        <el-button type="text" size="small" @click="showPreview(scope.row)">预览</el-button>
        <el-button type="text" size="small" :disabled="scope.row.chkState == 0 ? false : true" @click="shenhe(scope.row)">审核</el-button>
        <el-button type="text" size="small" :disabled="scope.row.chkState == 0 ? true : false" @click="setId(scope.row)">修改</el-button>
        <el-button type="text" size="small" @click="addPreview(scope.row)">上架</el-button>
        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
      </el-table-column>
  </el-table>
  <!-- 试题预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      v-if="previewDialogVisible"
      width="60%"
      >
      <questions-preview :TableID="TableItemData"/>
      <span slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="previewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  <!-- 试题审核对话框 -->
  <el-dialog
      title="题目审核"
      :visible.sync="checkDialogVisible"
      v-if="checkDialogVisible"
      width="26%"
      >
      <questionsCheck :check="check" />
      <span slot="footer" class="dialog-footer">
      <el-button  @click="checkDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="checkDialogVisible = false">确认</el-button>
      </span>
  </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import questionsPreview from '../components/questions-preview'
import questionsCheck from '../components/questions-check'
import { choicePublish, remove } from '@/api/hmmm/questions'
export default {
  name: 'choiceTabeitem',
  data () {
    return {
      nan: ['','简单', '一般' ,'困难'],
      ti: ['','单选', '多选' ,'简答'],
      shen: ['待审核', '通过' ,'拒绝'],
      previewDialogVisible: false,
      checkDialogVisible: false,
      TableItemData: null, // 预览传值
      check: null // 审核传值
    }
  },
  components: {
    questionsPreview,
    questionsCheck
  },
  props: {
    Tablelist: {
      type: Array,
      required: true
    },
    subjectsLis: {
      type: Array,
      required: true
    },
    counts: {
      type: Number,
      required: true
    }
  },
  methods: {
    Time (time) { // 格式化时间
      return parseTime(time)
    },
    showPreview (data) {
      this.previewDialogVisible = true
      this.TableItemData = data.id
    },
    shenhe (data) {
      this.checkDialogVisible = true
      this.check = data
    },
    setId (data) {
      // console.log(data.id);
      this.$router.push({
        path: '/questions/new',
        query: { // 需要携带的参数
          id: data.id
        }
      })
    },
    async addPreview (data) {
      const { dataa } = await choicePublish(data) 
    },
   async del (data) {
     const { dataa } = await remove(data)
     console.log(dataa);
    }
   },
  computed: {
    subjectsLiss () { // 学科
      return this.subjectsLis.unshift('')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-alert {
 margin-bottom: 15px;
}
/deep/ .el-table{
  margin-bottom: 20px;
}
/deep/ .el-dialog__footer {
  text-align: right;
}
</style>
